---
title: Marquee
date: 2023-07-26
description: An infinite scrolling component that can be used to display text, images, or videos.
author: dillionverma
published: true
video: https://cdn.magicui.design/marquee.mp4
---

<ComponentPreview name="marquee-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        marquee: "marquee var(--duration) linear infinite",
        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
      },
      keyframes: {
        marquee: {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(calc(-100% - var(--gap)))" },
        },
        "marquee-vertical": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(calc(-100% - var(--gap)))" },
        },
      },
    },
  },
};
```

```text
components/magicui/marquee.tsx
```

<ComponentSource name="marquee" />

</Steps>

## Examples

### Vertical

<ComponentPreview name="marquee-demo-vertical" />

### 3D

<ComponentPreview name="marquee-3d" />

## Props

| Prop         | Type    | Default | Description                                                                  |
| ------------ | ------- | ------- | ---------------------------------------------------------------------------- |
| className    | string  |         | The class name to apply to the component.                                    |
| reverse      | boolean | false   | Whether or not to reverse the direction of the marquee.                      |
| pauseOnHover | boolean | false   | Whether or not to pause the marquee when the user hovers over the component. |
| vertical     | boolean | false   | Whether or not to display the marquee vertically.                            |
| children     | node    |         | The content to display in the marquee.                                       |
| repeat       | number  | 1       | The number of times to repeat the content.                                   |
